<template>
  <n-space :vertical="true" :size="16">
    <n-card title="我的收益" :bordered="false" class="h-full rounded-8px shadow-sm">
      <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
        <n-grid-item v-for="item in cardData" :key="item.id">
          <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
            <h3 class="text-16px">{{ item.title }}</h3>
            <div class="flex justify-between pt-12px">
              <svg-icon :icon="item.icon" class="text-32px" />
              <count-to
                :suffix="item.suffix"
                :start-value="0"
                :end-value="item.value"
                class="text-30px text-white dark:text-dark"
              />
            </div>
          </gradient-bg>
        </n-grid-item>
      </n-grid>
    </n-card>
    <n-card title="收益明细" :bordered="false" class="rounded-8px shadow-sm">
      <n-space>
        <p class="text-center">月度统计</p>
        <n-date-picker v-model:value="timestamp" type="month" clearable />
      </n-space>

      <n-row class="py-12px">
        <n-col :span="12">
          <n-statistic label="收入">{{ income }}</n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="罚款">{{ fine }}</n-statistic>
        </n-col>
      </n-row>
      <div ref="lineRef" class="h-400px"></div>
    </n-card>
  </n-space>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';
import { type ECOption, useEcharts } from '@/composables';
import { GradientBg } from '@/views/dashboard/analysis/components/data-card/components';

interface CardData {
  id: string;
  title: string;
  value: number;
  suffix: string;
  colors: [string, string];
  icon: string;
}

const timestamp = ref(1183135260000);
const income = ref('1,234,123');
const fine = ref('1,234,123');

const cardData: CardData[] = [
  {
    id: 'visit',
    title: '本月收益',
    value: 0,
    suffix: '元',
    colors: ['#ec4786', '#b955a4'],
    icon: 'ant-design:money-collect-outlined'
  },
  {
    id: 'amount',
    title: '累计收益',
    value: 0,
    suffix: '元',
    colors: ['#865ec0', '#5144b4'],
    icon: 'ant-design:bar-chart-outlined'
  }
];

const lineOptions = ref<ECOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['收入', '罚款']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      color: '#e7bcf3',
      name: '收入',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#e7bcf3'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      color: '#fb7293',
      name: '罚款',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#fb7293'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}) as Ref<ECOption>;
const { domRef: lineRef } = useEcharts(lineOptions);
</script>

<style scoped></style>
